﻿<style src="../../style/tabs.css" scoped></style>
<template>
    <div style="height:100%;">
        <Row>
            <Col span="24" class="col-margin">
            <!--根据需求删除不不要查询条件-->
            所属地区：
            <Select v-model="searchModel.AreaCode"  placeholder="请选择..." style="width: 100px" >
                <Option :value="userInfo.AreaCode">{{(userInfo.AreaCode=='530000000000')?'全省':'全市（州）'}}</Option>
                <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
            </Select>
            填报年度：
            <Select v-model="searchModel.FillInYear" placeholder="全部" style="width: 200px" >
                <!-- <Option value="">全部</Option> -->
                <Option :value="item.DictValue" v-for="item in yearList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            报表状态：
            <Select v-model="searchModel.Status" placeholder="全部" style="width: 200px" >
                <Option value="">全部</Option>
                <Option :value="item.DictValue" v-for="item in statusList" :key="item.DictValue">{{item.DictText}}</Option>
            </Select>
            <Button icon="ios-search" type="ghost" @click="getPageData()">查询</Button>
            </Col>
        </Row>
        <Row>
            <Col span="24" class="col-margin">            
            <Table size="small" :height="clientHeight" border :context="ctx" :columns="columnsList" :data="datas.rows" no-data-text='暂无数据...'></Table>
            </Col>
        </Row>
        <Row>
            <Col span="24">
            <Page class="page-style" :total="datas.total" placement="top" @on-change="getPageNumber" :page-size="searchModel.PageSize" :page-size-opts='pageSizeOpts' show-sizer @on-page-size-change="getPageSize" show-total show-elevator></Page>
            </Col>
        </Row>
        <!-- <Modal v-model="showType" :mask-closable="false" width="1500">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">{{AreaName}}-（一）各品种马铃薯全年生产情况统计表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>            
            <table class="reptable">
                    <thead>
                        <tr>
                            <th rowspan="2">品种</th>
                            <th colspan="4">全年合计</th>
                            <th colspan="4">其中：大春作</th>
                            <th colspan="4">其中：秋作</th>
                            <th colspan="4">其中：冬作</th>                                                      
                        </tr>
                        <tr>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(dataModel,index) in dataList" :key="index">
                            <td>
                                {{dataModel.Pvariety}}
                            </td>
                            <td>
                                {{dataModel.YArea}}
                            </td>
                            <td> 
                                {{dataModel.YYield}}
                            </td>
                            <td>
                                {{dataModel.YAvgMuYield}}
                            </td> 
                            <td>
                                {{dataModel.YOutput}}
                            </td>
                            <td>
                                {{dataModel.SArea}}
                            </td>  
                            <td>
                                {{dataModel.SYield}}
                            </td>
                             <td>
                                {{dataModel.SAvgMuYield}}
                            </td>
                            <td>
                                {{dataModel.SOutput}}
                            </td>
                            <td>
                                {{dataModel.AArea}}
                            </td>
                            <td>
                                {{dataModel.AYield}}
                            </td> 
                            <td>
                                {{dataModel.AAvgMuYield}}
                            </td> 
                            <td>
                                {{dataModel.AOutput}}
                            </td>
                            <td>
                                {{dataModel.WArea}}
                            </td>
                            <td>
                                {{dataModel.WYield}}
                            </td>
                            <td>
                                {{dataModel.WAvgMuYield}}
                            </td>
                            <td>
                                {{dataModel.WOutput}}
                           </td> 
                        </tr>
                    </tbody>
                </table>
                 <div slot="footer" style="padding-bottom:50px">
                <Alert style="margin-top:5px;text-align:left" banner type="error">
                    填报时间：每年1月10日</br>
                    填报说明: 1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。
                    <span slot="desc">
                    </span>
                </Alert>
            </div>
        </Modal> -->
        <Modal v-model="showAudit" :mask-closable="false" width="500">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">退回重报原因</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
            <Input type="textarea" :rows="4" v-model="unPassReason" placeholder="请输入不通过原因..."></Input>
            <div slot="footer">
                <Button type="primary" @click="unpass()">确定</Button>
                <Button type="ghost" @click="showAudit=false" style="margin-left: 8px">取消</Button>
            </div>
        </Modal>
         <Modal v-model="showType" :mask-closable="false" width="1200">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">{{AreaName}}-（一）各品种马铃薯全年生产情况统计表</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>            
            <!-- <table class="reptable">
                    <thead>
                        <tr>
                            <th rowspan="2">品种</th>
                            <th colspan="4">全年合计</th>
                            <th colspan="4">其中：大春作</th>
                            <th colspan="4">其中：秋作</th>
                            <th colspan="4">其中：冬作</th>                                                      
                        </tr>
                        <tr>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                            <th>面积(万亩）</th>
                            <th>总产（万吨）</th>
                            <th>平均亩产（公斤/亩）</th>                            
                            <th>总产值（万元）</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(dataModel,index) in dataList" :key="index">
                            <td>
                                {{dataModel.Pvariety}}
                            </td>
                            <td>
                                {{dataModel.YArea}}
                            </td>
                            <td> 
                                {{dataModel.YYield}}
                            </td>
                            <td>
                                {{dataModel.YAvgMuYield}}
                            </td> 
                            <td>
                                {{dataModel.YOutput}}
                            </td>
                            <td>
                                {{dataModel.SArea}}
                            </td>  
                            <td>
                                {{dataModel.SYield}}
                            </td>
                             <td>
                                {{dataModel.SAvgMuYield}}
                            </td>
                            <td>
                                {{dataModel.SOutput}}
                            </td>
                            <td>
                                {{dataModel.AArea}}
                            </td>
                            <td>
                                {{dataModel.AYield}}
                            </td> 
                            <td>
                                {{dataModel.AAvgMuYield}}
                            </td> 
                            <td>
                                {{dataModel.AOutput}}
                            </td>
                            <td>
                                {{dataModel.WArea}}
                            </td>
                            <td>
                                {{dataModel.WYield}}
                            </td>
                            <td>
                                {{dataModel.WAvgMuYield}}
                            </td>
                            <td>
                                {{dataModel.WOutput}}
                           </td> 
                        </tr>
                    </tbody>
                </table> -->
                <Tabs >
                    <TabPane label="全年合计" >
                        <table :class="['reptable','topMargin']">
                            <thead>
                                <tr>
                                    <th style="width:120px" rowspan="2">品种</th>
                                    <th>面积(万亩）</th>
                                    <th>总产（万吨）</th>
                                    <th>平均亩产（公斤/亩）</th>                            
                                    <th>总产值（万元）</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(dataModel,index) in dataList" :key="index">
                                    <td style="width:120px">
                                        {{dataModel.Pvariety}}
                                    </td>
                                    <td>
                                        {{dataModel.YArea}}
                                    </td>
                                    <td> 
                                        {{dataModel.YYield}}
                                    </td>
                                    <td>
                                        {{dataModel.YAvgMuYield}}
                                    </td> 
                                    <td>
                                        {{dataModel.YOutput}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </TabPane>
                    <TabPane label="其中：春作" >
                        <table :class="['reptable','topMargin']">
                            <thead>
                                <tr>
                                    <th style="width:120px" rowspan="2">品种</th>
                                    <th>面积(万亩）</th>
                                    <th>总产（万吨）</th>
                                    <th>平均亩产（公斤/亩）</th>                            
                                    <th>总产值（万元）</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(dataModel,index) in dataList" :key="index">
                                    <td style="width:120px">
                                        {{dataModel.Pvariety}}
                                    </td>
                                    <td>
                                        {{dataModel.SArea}}
                                    </td>  
                                    <td>
                                        {{dataModel.SYield}}
                                    </td>
                                    <td>
                                        {{dataModel.SAvgMuYield}}
                                    </td>
                                    <td>
                                        {{dataModel.SOutput}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </TabPane>
                    <TabPane label="其中：秋作" >
                        <table :class="['reptable','topMargin']">
                            <thead>
                                <tr>
                                    <th style="width:120px" rowspan="2">品种</th>
                                    <th>面积(万亩）</th>
                                    <th>总产（万吨）</th>
                                    <th>平均亩产（公斤/亩）</th>                            
                                    <th>总产值（万元）</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(dataModel,index) in dataList" :key="index">
                                    <td style="width:120px">
                                        {{dataModel.Pvariety}}
                                    </td>
                                    <td>
                                        {{dataModel.AArea}}
                                    </td>
                                    <td>
                                        {{dataModel.AYield}}
                                    </td> 
                                    <td>
                                        {{dataModel.AAvgMuYield}}
                                    </td> 
                                    <td>
                                        {{dataModel.AOutput}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </TabPane>
                    <TabPane label="其中：冬作" >
                        <table :class="['reptable','topMargin']">
                            <thead>
                                <tr>
                                    <th style="width:120px" rowspan="2">品种</th>
                                    <th>面积(万亩）</th>
                                    <th>总产（万吨）</th>
                                    <th>平均亩产（公斤/亩）</th>                            
                                    <th>总产值（万元）</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(dataModel,index) in dataList" :key="index">
                                    <td style="width:120px">
                                        {{dataModel.Pvariety}}
                                    </td>
                                    <td>
                                        {{dataModel.WArea}}
                                    </td>
                                    <td>
                                        {{dataModel.WYield}}
                                    </td>
                                    <td>
                                        {{dataModel.WAvgMuYield}}
                                    </td>
                                    <td>
                                        {{dataModel.WOutput}}
                                </td> 
                                </tr>
                            </tbody>
                        </table>
                    </TabPane>
                </Tabs>
            <div slot="footer" style="padding-bottom:50px">
                <div style="text-align:right;padding-top:5px" v-show="showEdit">
                    <Button type="primary" @click="pass()">审核通过</Button>
                    <Button type="warning" @click="showType=false,showAudit=true">退回重报</Button>
                </div>
                <Alert style="margin-top:5px;text-align:left" banner type="error">
                    填报时间：每年1月10日</br>
                    填报说明: 1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。
                    <span slot="desc">
                    </span>
                </Alert>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showType: false,//编辑框弹出状态 
            showEdit:false,//是否显示审核页
            showAudit:false,//是否显示审核不通过原因页
            yearList: this.GetGroupDict("ReportYear"),
            statusList: this.GetGroupDict("ReportStatus"), 
            ReportId:'',  
            unPassReason:'' , 
            dataList:[],        
            AreaName:'',     
            dataModel: {//编辑模型
                Id: '',
                ReportId:'', 
                YArea:'', 
                YAvgMuYield:'', 
                YYield:'', 
                YOutput:'', 
                SArea:'', 
                SAvgMuYield:'', 
                SYield:'', 
                SOutput:'', 
                AArea:'', 
                AAvgMuYield:'', 
                AYield:'', 
                AOutput:'', 
                WArea:'', 
                WAvgMuYield:'', 
                WYield:'', 
                WOutput:'', 
            },
            clientHeight: window.innerHeight - 218,//表格默认高度
            userInfo:this.GetlocaStorage("potUserinfo"),
            AreaList: [], //所属行政区划数组,
            //查询模型：根据需求删除不不要查询条件
            searchModel: {
                AreaCode:this.GetlocaStorage("potUserinfo").AreaCode,
                ReportCode:'PotYearProduct',
                FillInYear: new Date().getFullYear() + "",    
                Status:'3',    
                PageNumber: 1, PageSize: 20
            },
            pageSizeOpts: [20, 40, 50],//默认分页最大设置
            datas: {},//table数据对象
            dataIds: [],
            ctx: this,//table数据上下文
            columnsList: [//表头对象
                {
                    title: '报表名称',
                    key: 'ReportCodeName',
                    ellipsis: true,                   
                },
                {
                    title: '归属地区',
                    key: 'AreaCodeName',
                    width: 120
                },
                {
                    title: '填报年度',
                    key: 'FillInYearName',
                    width: 120
                },
                {
                    title: "报表状态",
                    key: "StatusName",
                    width: 120,
                    render: (h, params) => {
                        switch (params.row.Status * 1) {
                            case 0: //审核未通过
                                return h('span', { class: { Error: true } }, params.row.StatusName);
                            case 1: //未填报
                                return h('span', { class: { NoReport: true } }, params.row.StatusName);
                            case 2: //已填报
                                return h('span', { class: { AlreadyReport: true } }, params.row.StatusName);
                            case 3: //已上报
                                return h('span', { class: { UpReport: true } }, params.row.StatusName);
                            case 4: //审核通过
                                return h('span', { class: { Success: true } }, params.row.StatusName);
                            case 5: //锁定
                                return h('span', { class: { error: true } }, params.row.StatusName);
                            default:
                                return h('span', { class: { Default: true } }, params.row.StatusName);
                        }
                    }
                },
                {
                    title: '添加时间',
                    key: 'StrUpdateTime',
                    ellipsis: true
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 350,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-compose'
                                },
                                style: { marginRight: '5px', marginTop: '10px' },
                                on: {
                                    click: () => { 
                                        this.AreaName = params.row.AreaCodeName;
                                        this.ShowInfo(params.row.Id); }
                                }
                            }, '查看'),                           
                            h('Button', {
                                class: { ieditColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'network'
                                },
                                attrs: {
                                    disabled: params.row.Status == 3 ? false : true
                                },
                                style: { marginRight: '5px', marginTop: '10px' },
                                on: {
                                    click: () => {
                                        this.AreaName = params.row.AreaCodeName; 
                                        this.EditInfo(params.row.Id);
                                    }
                                }
                            }, '审核'),
                            h('Button', {
                                class: { ideleteColor: true },
                                props: {
                                    type: 'ghost', size: 'small', icon: 'ios-undo'
                                },
                                style: {
                                    marginRight: '5px',marginTop: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.unReview(params.row.Id)
                                    }
                                },
                                attrs: {
                                    disabled: params.row.Status == 4 ? false : true
                                },                               
                            }, '取消审核'),

                        ]);
                    }
                }]
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 218;
            })()
        };
    },
    methods: {
        //获取当前页码
        getPageNumber(pageIndex) {
            this.searchModel.PageNumber = pageIndex;
            this.getPageData();
        },
        //获取当前分页大小
        getPageSize(pageSize) {
            this.searchModel.PageSize = pageSize;
            this.getPageData();
        },
        //获取this.datas: {},//table数据对象
        getPageData() {
            var self = this;
            self.$http.post('Report/PostPageList', this.searchModel).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data;
                }
                else {
                    self.$Modal.error({ title: '提示信息', content: res.data.message });
                }
            });
        },
        changeReportStatue(ReportId, Status, Msg) {
            var self = this;
            let model = new Object();
            model.Id = ReportId;
            model.Status = Status;
            model.Opinion = Msg;
            this.$http.post("Report/PostUpStatus", model).then(
                function (res) {
                    if (res.data.status == 1) {
                        self.$Notice.success({ title: '操作成功！', desc: false });
                        self.getPageData();
                        
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "操作失败!" });
                    }
                }
            );
        },
        pass(){
            self.showType = false;
            this.changeReportStatue(this.ReportId,'4','');
        },
        unpass(){
            this.showAudit = false;
            this.changeReportStatue(this.ReportId,'0',this.unPassReason);
        },
        unReview(ReportId){
            this.changeReportStatue(ReportId,'0','取消审核！');
        },
        ShowInfo(ReportId){
            var self = this;
            this.$http.get("PotYearProduct", { params: { ReportId: ReportId } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataList = res.data.model;
                        self.ReportId = ReportId;
                        self.showType = true;  
                        self.showEdit = false;
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                    }
                }
            );
        },
        EditInfo(ReportId){
            var self = this;
            this.$http.get("PotYearProduct", { params: { ReportId: ReportId } }).then(//获取数据编辑项的值
                function (res) {
                    if (res.data.status == 1) {
                        self.dataList = res.data.model;
                        self.ReportId = ReportId;
                        self.showType = true;   
                        self.showEdit = true;                     
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "数据加载失败!!!" });
                    }
                }
            );
        },
        SearchAreaList() {
            var areaCode = this.userInfo.AreaCode;
            var areaList = [];
            if (areaCode != "530000000000" && areaCode != null) {
                var item = this.GetlocaStorage("areatreelist")[0];
                for (var i = 0; i < item.children.length; i++) {
                    if (item.children[i].value == areaCode) {
                        areaList.push(item.children[i]);
                    }
                }
            } else {
                areaList = this.GetlocaStorage("areatreelist");
            }
            this.AreaList = areaList[0].children;
        },
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.getPageData();
        this.SearchAreaList();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
